<template>
  <div>
    <div style="display:block;position:fixed;width:100%;z-index:999" v-if="maintab">
      <yd-tab :callback='load2'>
        <yd-tab-panel label="食" ></yd-tab-panel>
        <yd-tab-panel label="住" ></yd-tab-panel>
        <yd-tab-panel label="行" ></yd-tab-panel>
        <yd-tab-panel label="游" active ></yd-tab-panel>
        <yd-tab-panel label="购" ></yd-tab-panel>
      </yd-tab>
    </div>
    <div v-bind:style="styleObject">
    <div class="headimg">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507611832278&di=c0abf41451e4822b0e02abe67d82daa9&imgtype=0&src=http%3A%2F%2Fdl.bizhi.sogou.com%2Fimages%2F2013%2F08%2F20%2F360548.jpg" alt="">
    </div>
    <!-- <div class="condiv">
      <yd-button size="small" type="primary" shape="circle" bgcolor="#FF9800" color="#fff">领取优惠券</yd-button>
    </div> -->
    <!-- <yd-cell-group>
      <yd-cell-item>
          <hd-svg-icon name="hd-sousuo" slot="left" size="35px" color="#8d8d8d"></hd-svg-icon>
        <yd-input slot="right" placeholder="关键字搜索    想吃的/想玩的/想住哪" v-model="search" @click.native="clickSearch"></yd-input>
      </yd-cell-item>
    </yd-cell-group> -->
    <!-- <yd-search placeholder="关键字搜索    想吃的/想玩的/想住哪" v-model="value1" :on-submit="submitHandler"></yd-search> -->
    <yd-search placeholder="关键字搜索    想吃的/想玩的/想住哪" v-model="value1" :on-submit="submitHandler"></yd-search>
    <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>
      <div v-for="item in list" :key="item.index" slot="list">
        <div class="zdytop">
          <div class="zdyleft">
            <span class="zdyleft-top">{{item.name}}</span><br>
            <span class="zdyleft-button">最受大家喜欢的美食推荐</span>
          </div>
          <div class="zdyright" v-if="item.a==0"><router-link :to="{path:'blue_two',query: {id:item.id, name:item.name}}">查看更多>></router-link></div>
          <div class="zdyright" v-if="item.a==1"><router-link :to="{path:'placelist',query: {id:item.id,name_info:item.name_info, name:item.name}}">查看更多>></router-link></div>
        </div>
        <div class="demo">
          <!-- swiper -->
          <swiper :options="swiperOption">
            <swiper-slide style="backgroundColor: #fff;"  v-for="subl in item.sublist" :key="subl.index">
              <div class="imgjxx">
                <div style="height:3.5rem;">
                  <router-link :to="{path:'recommend_detail',query: {id:subl.place_id,code:subl.code,name: subl.place_name}}">
                    <img :src="subl.place_img" alt="" srcset="" class="hd-img-responsive" v-if="item.a==1">
                  </router-link>
                  <router-link :to="{path: 'placelist', query: {id: subl.id, name_info: subl.name_info,name: subl.name}}">
                    <img :src="subl.image" alt="" srcset="" class="hd-img-responsive" v-if="item.a==0">
                  </router-link>
                  <!-- <yd-button type="hollow" class="zn">指南</yd-button> -->
                </div>
                  <div class="imgxl">
                    <span class="imgxlt" v-if="item.a==1">{{subl.place_name}}</span>
                    <span class="imgxlt" v-if="item.a==0">{{subl.name}}</span>
                    <span class="imgxlb" v-if="item.a==1"><yd-rate slot="left" v-model="subl.star" :readonly="true" color="#ff9800" activeColor="#ff9800" size="12px" padding="1px"></yd-rate><span>{{subl.num}}</span>条评价</span>
                  </div>
                  <!-- <div class="imgxr" v-if="item.a==1">{{subl.place_content}}</div> -->
                  <!-- <div class="imgxr" v-if="item.a==0">{{subl.name_info}}</div> -->
                  <div class="imgxr" v-if="item.a==1" >{{subl.place_content}}</div>
                  <div class="imgxr" v-if="item.a==0" >{{subl.name_info}}</div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <div class="fengexian"></div>
      </div>
      <!-- 数据全部加载完毕显示 -->
      <span slot='doneTip'>没有更多数据啦~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <img slot='loadingTip' src='http://static.ydcss.com/uploads/ydui/loading/loading10.svg'/>
    </yd-infinitescroll>
    <!-- 以上随动按钮 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'redlist',
  data () {
    return {
      maintab: true,
      search: '',
      value1: '',
      // swiper 参数设置 详见
      swiperOption: {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
       // centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 10,
        loop: false
      },
      outdata: [],
      searchdata: {},
      pageNo: 1,
      pageSize: 3,
      list: [],
      styleObject: {
        'width': '100%',
        'position': 'absolute',
        'top': '90px',
        'left': '0'
      },
      iswx: true
    }
  },
  mounted: function() {
    this.load();
    // 判断浏览器类型 打开方式是否是微信浏览器方式打开
    var ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.maintab = false;
      this.styleObject = {
        'width': '100%',
        'position': 'absolute',
        'top': '0',
        'left': '0'
      };
      // alert('正在使用微信浏览器打开')
    } else {
      this.maintab = true;
      this.styleObject = {
        'width': '100%',
        'position': 'absolute',
        'top': '90px',
        'left': '0'
      };
      // alert('正在使用其他浏览器打开' + ua + ' --- ' + ua.match(/MicroMessenger/i))
    }
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.findByUseList,
        data: {
          type: 'J',
          parentid: '1111',
          pageNo: this.pageNo,
          pageSize: this.pageSize
        },
        success: (resultData) => {
          // this.outdata = resultData.data.results;
          // this.indata = this.outdata.sublist;
          const _list = resultData.data.results;
          this.list = [...this.list, ..._list];
          this.list.forEach(element => {
            element.sublist.forEach(elements => {
              // console.log(elements);
              if (elements.place_content) {
                // elements.place_content = elements.place_content.replace(/<\/?(img|a)[^>]*>/gi, '');
                elements.place_content = elements.place_content.replace(/(\n)/g, '');
                elements.place_content = elements.place_content.replace(/(\t)/g, '');
                elements.place_content = elements.place_content.replace(/(\r)/g, '');
                elements.place_content = elements.place_content.replace(/<\/?[^>]*>/g, '');
                elements.place_content = elements.place_content.replace(/\s*/g, '');
                elements.place_content = elements.place_content.replace(/&nbsp;/ig, '');
                console.log(elements.place_content);
              }
              if (elements.name_info) {
                elements.name_info = elements.name_info.replace(/(\n)/g, '');
                elements.name_info = elements.name_info.replace(/(\t)/g, '');
                elements.name_info = elements.name_info.replace(/(\r)/g, '');
                elements.name_info = elements.name_info.replace(/<\/?[^>]*>/g, '');
                elements.name_info = elements.name_info.replace(/\s*/g, '');
                elements.name_info = elements.name_info.replace(/&nbsp;/ig, '');
              }
              // console.log(elements.place_content);
            })
          });
          if (_list.length < this.pageSize) {
            /* 所有数据加载完毕 */
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          /* 单次请求数据完毕 */
          this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          this.pageNo++;
        }
      });
    },
    load2(value) {
      if (value === '食') {
        this.$router.push({path: 'redList'});
      };
      if (value === '住') {
        this.$router.push({path: 'liveIndex'});
      };
      if (value === '行') {
        this.$router.push({path: 'trafficindex'});
      };
      if (value === '游') {
        this.$router.push({path: 'blueIndex'});
      };
      if (value === '购') {
        this.$router.push({path: 'buylist'});
      };
    },
    clickSearch () {
      if (!this.search) {
        this.$dialog.toast({mes: '请输入搜索内容!'})
        return false
      }
      this.hdAjax({
        url: this.API.findPlaceNameList,
        data: {
          name: this.search,
          type: 'J'
        },
        success: (resultData) => {
          if (resultData.data && resultData.errcode === 0) {
            this.outdata = resultData.data.results;
          }
        }
      })
    },
    submitHandler (value) {
      this.$router.push({path: '/placelist', query: {searchtext: value, name: '景区列表'}})
    }
  }
}
</script>

<style scope>
body{
  font-family: '微软雅黑'
}
header{
  background-color: #393A3F;
}

.swidiv{
  float: left;
}
.mapbut{
  border: 1px solid #000;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  position: fixed;
  width: 25%;
  height: 35px;
  line-height: 35px;
  left: 37.5%;
  bottom: 10px;
  z-index: 100;
}
.mapbut .icon-ucenter-outline:before {
  content: "\E616";
  color: #000;
}
.skljx{
  width: 100%;
  height: 80px;
  padding: 5px 10px;
}
.skljxt{
  font-size: 14px;
}
.skljgl{
  position: relative;
  border-radius: 15px;
  top: -120px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.skljxt2{
  font-size: 12px;
}
.skljxr{
  float: right;
  font-size: 12px;
}
.zn{
  position: relative;
  border-radius: 15px;
  top: -38px;
  margin-left: 3%;
  width: 30px;
  height: 25px;
}
.ddxgzn{
  position: relative;
  border-radius: 15px;
  top: -40px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.ddxg img{
  width: 100%;
  height: 300px;
}
.sklj img{
  width: 100%;
  height: 300px;
}
.icon-ucenter-outline:before {
    content: "\E616";
    color: #fff;
}
.back-icon:before {
    content: "\E607";
    color: #fff;
}
element.style {
    color: #fff;
}
.navbar-item>a {
  color: #fff;
}
.headimg {
  width: 100%;
  height: 250px;
}
.headimg img{
  width: 100%;
  height: 250px;
}
.condiv{
  padding: 10px 10px;
}
.condiv button{
  font-size: 14px;
  width: 40%;
  height: 45px;
}
/* .m-cell {
  background-color: #218B98;
  padding: 10px;
  margin-bottom: -10px;
} */
/* .cell-item{
  height: 40px;
  padding: 0px;
  background-color: #fff;
  border-radius: 8px;
}
.cell-right{
  min-height: 0px;
} */
.imgsli{
  min-width: 100%;
  height: 300px;
}
.imgsli li{
  float: left;
  width: 70%;
  height: 300px;
  border: 2px solid #000;
}
.zdytop{
  margin-top: 10px;
  width: 100%;
  height: 50px;
  padding: 10px;
}
.zdyleft{
  float: left;
  width: 50%;
  height: 50px;
  margin-left: 0px;
  float: left;
  text-align: left;
}
.zdyleft-top{
  font-size: 18px;
}
.zdyleft-button{
  color: #D0D0D0;
}
.zdyright{
  float: right;
  font-size: 12px;
  width: 50%;
  height: 30px;
  margin-right: 0px;
  text-align: right;
  line-height: 30px;
}
.fengexian{
  margin-left: 2%;
  width: 96%;
  border-bottom: 1px solid #999999;
  margin-top: 15px;
}
.swiper-container {
  width: 100%;
  /* margin: 10px auto;  */
}
.swiper-slide {
  float: left;
  text-align: left;
  font-size: 18px;
  /* background: #fff; */
  width: 80%;

  /* Center slide text vertically */
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.imgjxx{
  position:relative;
  float: left;
  width: 300px;
  margin-left: 10px;
}
.imgxl{
  float: left;
  margin-top: 3px;
  width: 50%;
  height: 60px;
}
.imgxlt{
  font-size: 14px;
}
.imgxlb{
  font-size: 12px;
}
.imgxr{
  float: right;
  text-align: left;
  font-size: 12px;
  width: 50%;
  height: 27px;
  margin-top: 7px;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.hd-img-responsive{
  height: 3.5rem;
  width: 100%;
  
}
.search-icon{
  width: 9%;
}
.yd-search-input>.search-input{
  border-radius: 8px;
}
.yd-search-input{
  background-color: #218B98;
  font-size: .25rem;
}
</style>
